.searchContainer {
  width: 300px;
  min-width: 200px;
  flex-shrink: 0;
}

.searchInputWrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.searchIcon {
  position: absolute;
  left: 14px;
  color: var(--ifm-color-emphasis-500);
}

.searchInput {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 40px;
  border-radius: 20px;
  border: 2px solid var(--ifm-color-emphasis-300);
  background: var(--ifm-background-color);
  color: var(--ifm-font-color-base);
  font-size: 0.9rem;
  transition: all var(--ifm-transition-fast);
  margin: 0;
}

.searchInput:focus {
  outline: none;
  border-color: var(--ifm-color-primary);
  box-shadow: 0 0 0 1px var(--ifm-color-primary-lightest);
}

.searchInput::placeholder {
  color: var(--ifm-color-emphasis-500);
}

.clearButton {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: var(--ifm-color-emphasis-500);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 0;
}

.clearButton:hover {
  background-color: var(--ifm-color-emphasis-200);
  color: var(--ifm-color-emphasis-700);
}

@media (max-width: 992px) {
  .searchContainer {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .searchContainer {
    width: 100%;
  }
}
